<template>
  <!-- <span class="title">Sensor Types</span> -->
  <div class="condition">
    <el-form :inline="true" :model="searchForm">
      <el-row :gutter="20">
        <el-col :span="10" style="float: right">
          <el-button type="primary" @click="addSensorType">Add</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div class="datatable">
    <el-table
      :data="result.list"
      border
      style="width: 100%; box-sizing: border-box"
    >
      <el-table-column type="index" :align="'center'" />
      <el-table-column
        prop="name"
        label="Name"
        :align="'center'"
      />

      <el-table-column
        prop="remark"
        label="Remark"
        :align="'center'"
      />
      <el-table-column label="Handler" :align="'center'">
        <template #default="scope">
          <el-button @click="edit(scope.row)">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row :gutter="20">
      <el-col :span="10" :offset="10">
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="result.total"
          class="mt-4"
          @current-change="changePage"
          :current-page="searchForm.page"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>

  <el-dialog
    center
    :close-on-click-modal="false"
    v-model="dialogFormVisible"
    title="Form"
  >
    <el-form
      :model="form"
      label-width="120px"
      label-position="left"
      style="max-width: 400px"
    >
      <el-form-item label="Name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Remark" :label-width="formLabelWidth">
        <el-input type="textarea" v-model="form.remark" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">Cancel</el-button>
        <el-button type="primary" @click="submit">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import MD5 from "md5";
import API from "api";

export default {
  name: "Sensor-Types",

  setup() {
    const { t } = useI18n();

    let state = reactive({
      result: {
        list: [],
        total: 0,
      },
      searchForm: {
        page: 1,
        keyword: "",
      },
      form: {
        id: 0,
        name: "",
        remark: "",
        action: "",
      },
      currentStatus: true,
      dialogFormVisible: false,
    });
    onMounted(() => {
      getSensorTypes();
    });
    
    const getSensorTypes = () => {
      API.sensorTypes({
        page: state.searchForm.page,
      }).then((res) => {
        state.result = res.data;
      });
    };
    const addSensorType = () => {
      state.dialogFormVisible = true;
    };
    const edit = (param) => {
      state.form = param;
      state.dialogFormVisible = true;
    };
    const submit = () => {
      state.form.action = "edit";
      if (state.form.id == 0) {
        state.form.action = "add";
        state.form.id = null;
      }
      API.handleSensorType(state.form).then((res) => {
        if (res.code != 0) {
          ElMessage.error(res.data);
          return;
        }
        initForm();
        state.dialogFormVisible = false;
        ElMessage({
          message: "Success",
          type: "success",
        });
      });
    };

    const cancel = () => {
      initForm();
      state.dialogFormVisible = false;
    };

    const initForm = () => {
      state.form = {
        id: 0,
        name: "",
        remark: "",
      };
    };
    const changePage = (page) => {
      state.searchForm.page = page;
      getSensorTypes();
    };
    
    return {
      t,
      changePage,
      addSensorType,
      edit,
      ...toRefs(state),
      submit,
      cancel,
      Search,
    };
  },
};
</script>

<style lang="scss" scoped>
.title {
  display: block;
  padding: 2rem 1rem;
  font-size: 2rem;
  font-weight: bolder;
  text-align: left;
}
.condition {
  margin-top: 4vh;
}
.search {
  display: flex;
  width: 30rem;
  padding: 1rem;
}
.datatable {
  box-sizing: border-box;
  width: 60vw;
  padding: 0.625rem;
}
.ml-1 {
  margin-left: 1rem;
}
</style>
